<template>
  <div>
    <div class="ordernum">
      <el-checkbox v-model="checked">订单编号：000000000000000000000</el-checkbox>
      <div>
        <el-button type="primary" plain @click="changeDesignate">更换指派</el-button>
        <el-button type="success" plain @click="designate">指派</el-button>
        <el-button type="success" plain @click="revocation">撤销</el-button>
      </div>
    </div>
    <div>
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        :show-header="false"
        border
        style="width: 100%;"
        class="tablebox"
      >
        <el-table-column prop="id" label width="180">
          <template slot-scope="scope">
            <el-image class="header-image" fit="cover" :src="scope.row.headPic"></el-image>
            <span>商品名称商品名称商品名称商品名称</span>
          </template>
        </el-table-column>
        <el-table-column prop="sku" label></el-table-column>
        <el-table-column prop="Receiving" label></el-table-column>
        <el-table-column prop="status" label></el-table-column>
        <el-table-column prop="number" label></el-table-column>
        <el-table-column prop="receveInfo" label></el-table-column>
        <el-table-column prop="orderSource" label></el-table-column>
        <el-table-column prop="deliveryman" label></el-table-column>
        <el-table-column prop="money" label></el-table-column>
        <el-table-column prop="retainage" label></el-table-column>
      </el-table>
    </div>
    <div class="reason">异常原因：{{abnormal}}</div>
    <div class="reason">撤销原因：{{revocation}}</div>
  </div>
</template>
<script>
export default {
  name: "",
  props: "data",
  data() {
    return {
      checked: true,
      abnormal: "这里是配送订单的异常备注",
      revocation: "这里是配送订单的撤销备注"
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {},
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 5 ||
        columnIndex === 6 ||
        columnIndex === 7 ||
        columnIndex === 8 ||
        columnIndex === 9 ||
        columnIndex === 10
      ) {
        if (rowIndex % this.tableData.length === 0) {
          return {
            rowspan: this.tableData.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    changeDesignate() {},
    designate() {},
    revocation() {}
  },
  watch: {}
};
</script>
<style scoped>
.ordernum {
  display: flex;
  justify-content: space-between;
  background: #f2f2f2;
  line-height: 50px;
  padding: 0 10px;
}
.reason {
  background: #fffaeb;
  line-height: 35px;
  color: #ff9900;
  padding: 5px;
  font-size: 13px;
}
/* .tablebox td {
  padding: 0 !important;
  height: 80px;
  line-height: 80px;
} */
</style>
